```jsx
import * as numberInput from "@zag-js/number-input"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

export function NumberInput() {
  // 1. Consume the machine
  const service = useMachine(numberInput.machine, { id: useId() })

  // 2. Convert machine to the provided API
  const api = numberInput.connect(service, normalizeProps)

  // 3. Render the component
  return (
    <div {...api.getRootProps()}>
      <label {...api.getLabelProps()}>Enter number:</label>
      <div>
        <button {...api.getDecrementTriggerProps()}>DEC</button>
        <input {...api.getInputProps()} />
        <button {...api.getIncrementTriggerProps()}>INC</button>
      </div>
    </div>
  )
}
```
